<template>

  <div class="all">
    <br>
    <el-card class="box-card">
      <h1 id="headforAdvSearch">高级搜索</h1>
      <br>

    <el-form ref="form" :model="form" label-width="80px" v-if="$store.state.isShow">
      <el-form-item label="文献名称">
        <el-input v-model="form.name" placeholder="请输入文献关键字"></el-input>
      </el-form-item>
      <el-form-item label="作者名称" >
        <el-input v-model="form.authorName" placeholder="请输入作者名称"></el-input>
      </el-form-item>

      <el-form-item label="文献类型">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="Conferences" name="type"></el-checkbox>
          <el-checkbox label="Books" name="type"></el-checkbox>
          <el-checkbox label="Patents" name="type"></el-checkbox>
          <el-checkbox label="Journals" name="type"></el-checkbox>

        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="发表时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择起始日期" v-model="form.startDate" style="width: 100%;" @click="checkDate"></el-date-picker>
        </el-col>

        <el-col :span="2">

        </el-col>

        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择结束日期" v-model="form.endDate" style="width: 100%;" @click="checkDate"></el-date-picker>
        </el-col>

      </el-form-item>


      <!-- <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item> -->
      <!-- <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
<!-- 展示搜索结果 -->
<!-- 把表单获取的信息用props形式传给ArticleResult
      ArticleResult 组件根据信息筛选出选中的文章并进行展示
      Article 文章类
      ArticleResult 文章展示类
      -->


      <!-- 隐藏按钮 -->

      <el-button icon="el-icon-arrow-down" @click="$store.state.isShow=!$store.state.isShow" v-if="!$store.state.isShow" class="changeButton"></el-button>
      <el-button icon="el-icon-arrow-up" @click="$store.state.isShow=!$store.state.isShow" v-if="$store.state.isShow" class="changeButton"></el-button>



    </el-card>
  <!-- 注意结尾的>必须要在右侧 -->
  <!-- 从这里把搜索结果全部传下去 -->
    <ArticleResult v-show="$store.state.showArticle"
    :conditions="this.searchValue"
    :name="form.name"
    :autherName="form.authorName"
    :type="form.type"
    :startDate="form.startDate"
    :endDate="form.endDate"
    :page="page">
    </ArticleResult>

  </div>

</template>


<script>
import { computed } from 'vue'
import ArticleResult from '../searchResult/ArticleResult.vue'

export default {
  components: { ArticleResult},
  name:'AdvSearch',
  data() {
      return {
        form: {
          name: '',
          authorName:'',
          type: [],
          startDate:'',
          endDate:'',
          

        },
        
        page:1,
        size:10,
        //demo的数据
        resultList: [],
      //articles info
      total_hits:45112,
      total_hits_str: '',
      aggregation: {
        conference: [
          {
            citation_count: 384,
            conference_id: "3083037350",
            count: 8,
            end: "2021-05-29",
            id: "3083037350",
            location: "Madrid, Spain",
            name: "ICSE 2021",
            offical_url: "https://conf.researchr.org/home/icse-2021",
            paper_count: 471,
            start: "2021-05-23"
          },
          {
            citation_count: 3246,
            conference_id: "71090686",
            count: 8,
            end: "2014-06-01",
            id: "71090686",
            location: "Hyderabad, India",
            name: "MSR 2014",
            offical_url: "http://2014.msrconf.org/",
            paper_count: 63,
            start: "2014-05-31"
          },],
        doctype: [
          {
            "Conference": 286
          },
          {
            "Journal": 170
          },
          {
            "Repository": 144
          },
          {
            "Thesis": 26
          },
          {
            "Patent": 12
          }
        ],
        journal: [
          {
            citation_count: "19256",
            count: 78,
            issn: "",
            id: "2595428313",
            journal_id: "2595428313",
            name: "arXiv: Software Engineering",
            paper_count: "7794",
            publisher: "",
            rank: "10353",
            webpage: ""
          },
          {
            citation_count: "34541",
            count: 17,
            issn: "",
            id: "2595428313",
            journal_id: "2595804992",
            name: "arXiv: Social and Information Networks",
            paper_count: "7232",
            publisher: "",
            rank: "10327",
            webpage: ""
          },
        ],
        publisher: [
          {
            "IEEE": 13
          },
          {
            "Apress, Berkeley, CA": 8
          },
          {
            "IOP Publishing": 7
          },
          {
            "ACM": 5
          },
          {
            "The Open Journal": 4
          },
          {
            "Elsevier BV": 3
          },
          {
            "Github": 3
          },
          {
            "Packt Publishing": 3
          },
          {
            "Apress": 2
          }
        ]
      },
      //articles表示当前页面显示的文章块数组
      articles:[
        {
          authors: [
            {
              author_name: "Yong Li",
              ids: [
                "331313",
              ]
            }
          ],
          fields:[
            {
              "citation_count": 3383974,
              "field_id": "115903868",
              "level": 1,
              "main_type": "business.industry",
              "name": "Software engineering",
              "paper_count": 368585,
              "rank": 4147
            },
            {
              "citation_count": 3901149,
              "field_id": "136197465",
              "level": 2,
              "main_type": "",
              "name": "Variety (cybernetics)",
              "paper_count": 243478,
              "rank": 6307
            }],
          paper_id: "4cd223df721b722b1c40689caa52932a41fcc221",
          paper_title: "Research on Chinese Entity Relation Extraction Method Based on Deep Learning ",
          abstract:"With the continuous progress of deep learning, “Entity relation extraction” is the most important subtask of information extraction. The theory of entity relation extraction model based on deep learning in Chinese is mature gradually. The purpose of this paper is to introduce the concept, classification and characteristics of Chinese entity relation extraction and explain the evaluation index. Under the framework of deep learning extraction, aiming at the use of deep learning method in entityextraction, the main methods are divided into supervised methodand distant supervision method. Based on the two methods, the derived methods are explained and compared in detail. Chinese domain relationextraction is due to different language structures and other reasons, and the applicability of the relation extraction model based on English is not good. Although it started late, with the efforts of researchers, the current method is relatively perfect. Finally, this paper predicts and prospects the development direction of Chinese entity relation extraction in the future.",
          citation_count: 4116,
          comment_count: 5,
          year:2021,
          reference_count: 42,
          is_collect:true,
          // 是否收藏
        },
        {
          authors: [
            {
              author_name: "Zhen Jia",
              ids: [
                "3362313",
              ]
            },
            {
              author_name: "Kuihua Huang",
              ids: [
                "231232",
              ]
            },
            {
              author_name: "Yang Chu",
              ids: [
                "431232",
              ]
            }
          ],
          fields:[
            {
              "citation_count": 3383974,
              "field_id": "115903868",
              "level": 1,
              "main_type": "business.industry",
              "name": "Software engineering",
              "paper_count": 368585,
              "rank": 8347
            },
            {
              "citation_count": 3901149,
              "field_id": "136197465",
              "level": 2,
              "main_type": "",
              "name": "Variety (cybernetics)",
              "paper_count": 243478,
              "rank": 8507
            }],
          paper_id: "4cd223df721b722b1c40689caa52932a41fcc222",
          paper_title: "Construction and Completion of Operational Entity Relationship Knowledge Graph",
          abstract:"construction and completion method of operational entity relationship knowledge graph (ERKG) is proposed to support tactical decision aids. The operational ERKG can be built by using a syntax indicator extraction method and an entity relationship extraction model combining syntax indicator with sentence-level context. And this ERKG can be complemented by employing a graph neural network inference model based on structured attention mechanism, and a relationship inference model combining operational entity knowledge with attention mechanism. While the entity relationship reasoning method combining the operational entity knowledge with attention mechanism is adopted to evaluate the trained relationship inference model. On the basis of structured ERKG, entity knowledge graph (EKG) and event knowledge graph (EventKG), tactical decision aid instructions can be generated by combining with the battlefield situation information.",
          citation_count: 3618,
          comment_count: 5,
          year:2022,
          reference_count: 42,
          is_collect:false,
          // 是否收藏
        },
        {
          authors: [
            {
              author_name: "John Lee",
              ids: [
                "3362353",
              ]
            },
            {
              author_name: "Zuo_zuo",
              ids: [
                "19373260",
              ]
            },
          ],
          fields:[
            {
              "citation_count": 3383974,
              "field_id": "115903868",
              "level": 1,
              "main_type": "business.industry",
              "name": "Software engineering",
              "paper_count": 368585,
              "rank": 8347
            },
            {
              "citation_count": 3901149,
              "field_id": "136197465",
              "level": 2,
              "main_type": "",
              "name": "Variety (cybernetics)",
              "paper_count": 243478,
              "rank": 8507
            }],
          paper_id: "4cd223df721b722b1c40689caa52932a41fcc223",
          paper_title: "Knowledge-rich, computer-assisted composition of Chinese couplets",
          abstract: "Recent research effort in poem composition has focused on the use of automatic language generation to produce a polished poem. A less explored question is how effectively a computer can serve as an interactive assistant to a poet. For this purpose, we built a web application that combines rich linguistic knowledge from classical Chinese philology with statistical natural language processing techniques. The application assists users in composing a ‘couplet’—a pair of lines in a traditional Chinese poem—by making suggestions for the next and corresponding characters. A couplet must meet a complicated set of requirements on phonology, syntax, and parallelism, which are challenging for an amateur poet to master. The application checks conformance to these requirements and makes suggestions for characters based on lexical, syntactic, and semantic properties. A distinguishing feature of the application is its extensive use of linguistic knowledge, enabling it to inform users of specific phonotypeal principles in detail, and to explicitly model semantic parallelism, an essential characteristic of Chinese poetry. We evaluate the quality of poems composed solely with characters suggested by the application, and the coverage of its character suggestions.",
          citation_count: 7688,
          comment_count: 5,
          year:2021,
          reference_count: 42,
          is_collect:true,
          // 是否收藏
        },
        {
          authors: [
            {
              author_name: "Chuanyang Hong",
              ids: [
                "312353",
              ]
            },
            {
              author_name: "Meng Tan",
              ids: [
                "232112",
              ]
            },
          ],
          fields:[
            {
              "citation_count": 3383974,
              "field_id": "115903868",
              "level": 1,
              "main_type": "business.industry",
              "name": "Software engineering",
              "paper_count": 368585,
              "rank": 8347
            },
            {
              "citation_count": 3901149,
              "field_id": "136197465",
              "level": 2,
              "main_type": "",
              "name": "Variety (cybernetics)",
              "paper_count": 243478,
              "rank": 8507
            }],
          paper_id: "4cd223df721b722b1c40689caa52932a41fcc229",
          paper_title: "Small and Medium-sized Enterprises Credit Risk Assessment Based on Temporal Knowledge Graphs" ,
          abstract: "Credit Risk Assessment (CRA) is a challenging task in the financial field. Previous studies mainly focus on large firms with more comprehensive data especially financial data, annual reports, but for Small and Medium-sized Enterprises (SMEs), there is only public data to utilize, such as news, cases, etc. To better assess risk for SMEs, we constructed a temporal knowledge graph by using public data and proposed a credit risk assessment model (short for TKG-CRA) which comprehensively considers the topological structure of the temporal enterprise knowledge graph with the spread of risks and the neighbor node sequence.Experiments on real-world datasets prove that our model has a larger performance improvement than other traditional methods.",
          citation_count: 5149,
          comment_count: 6,
          year:2021,
          reference_count: 42,
          is_collect:true,
          // 是否收藏
        },
        {
          authors: [
            {
              author_name: "Chuanyang Hong",
              ids: [
                "312353",
              ]
            },
            {
              author_name: "Meng Tan",
              ids: [
                "232112",
              ]
            },
          ],
          fields:[
            {
              "citation_count": 3383974,
              "field_id": "115903868",
              "level": 1,
              "main_type": "business.industry",
              "name": "Software engineering",
              "paper_count": 368585,
              "rank": 8347
            },
            {
              "citation_count": 3901149,
              "field_id": "136197465",
              "level": 2,
              "main_type": "",
              "name": "Variety (cybernetics)",
              "paper_count": 243478,
              "rank": 8507
            }],
          paper_id: "4cd223df721b722b1c40689caa52932a41fcc201",
          paper_title: "Graph based Unsupervised Learning Methods forEdge and Node Anomaly Detection in SocialNetwork",
          abstract:"In the last decade online social networks analysishas become an interesting area of research for researchers,to study and analyze the activities of users using which theuser interaction pattern can be identified and capture anyanomalies within an user community.Detecting such users canhelp in identifying malicious individuals such as automated bots,fake accounts, spammers, sexual predators, and fraudsters. Ananomaly (outliers, deviant patterns, exceptions, abnormal datapoints, malicious user) is an important task in social networkanalysis. The major hurdle in social networks anomaly detectionis to identify irregular patterns in data that behaves significantlydifferent from regular patterns. The focus of this paper is topropose graph based unsupervised machine learning methodsfor edge anomaly and node anomaly detection in social networkdata.",
          citation_count: 5014,
          comment_count: 6,
          year:2021,
          reference_count: 31,
          is_collect:true,
          // 是否收藏
        },

      ],

      
      isShowRes: false,
      searchValue: [
        {
          category: 'main',
          content: "",
          type: 1,
        },
        {
          category: 'title',
          content: "",
          type: 1,
        },
        {
          category: 'author',
          content: "",
          type: 1,
        },
      ],
      timeRange: ['0', '0'],
      options: [
        {
          value: 'main',
          label: '篇关摘'
        },
        {
          value: 'title',
          label: '篇名',
        }, {
          value: 'author',
          label: '作者'
        }, {
          value: 'abstract',
          label: '摘要'
        }, {
          value: 'field',
          label: '领域'
        },  {
          value: 'doi',
          label: 'DOI'
        },  {
          value: 'author_affiliation',
          label: '作者机构'
        },  {
          value: 'source',
          label: '文献来源'
        },
      ],
      types: [
        {
          value: 1,
          label: 'AND',
        }, {
          value: 2,
          label: 'OR'
        }, {
          value: 3,
          label: 'NOT'
        },
      ],

      }
    },

    mounted() {
      
    },
    methods: {

      // 提交 检查错误+向后端要文章数据
      onSubmit() {
        if( this.form.name===''&&
        this.form.authorName===''&&
        this.form.type===[]&&
        (this.form.startDate===''&&
        this.form.endDate===''))
        {
          alert("请输入筛选信息！")
        }
        else{
          this.$store.state.isShow=false;
          this.$store.state.showArticle=true;
          console.log(this.form.startDate)
          // const formData={
          //     name:this.form.name,
          //     authorName:this.form.authorName,
          //     type:this.form.type,
          //     // 时间对象 如果是空对象{}就不作为筛选条件 如果是Date对象就按照Date对象筛选
          //     startDate:JSON.stringify(this.form.startDate),
          //     endData:JSON.stringify(this.form.endDate),
          //     page:this.page,
          //     size:this.size
          // }

          // this.$axios({
          //   method:'post',
          //   url:'http://117.78.4.242/api/search/firstFilter/',
          //   data:JSON.stringify(formData)

          // }).then(response=>{
          //   this.articles=response.data.articles;
          //   this.aggregation=response.data.aggregation;
          //   console.log(response.data)
          //   console.log("消息已收到")
          // })

          // 全部后端请求直接由该组件发送
          this.$bus.$emit('getFirstFilter')





        }

      },


      cancel(){
        this.form.name=''
        this.form.authorName=''
        this.form.type=[]
        this.form.startDate=''
        this.form.endDate=''

      },

      checkDate(){
        if(this.form.startDate.getTime()>this.form.endDate.getTime())
        {
            console.log(this.startDate);
            console.log(this.endDate);
            alert("请输入合法的日期范围！");
            this.form.startDate='';
            this.form.endDate='';
        }
      },
    },
    mounted() {

    },
    watch:{
      articles:{
        deep:true,
        handler(newValue,oldValue)
        {
          console.log("检测到结果更新 强制刷新页面")
          console.log(this.articles)
        }
      }
    }
}
</script>

<style scoped>
.all{
  position:absolute;
  margin:auto;
  top: 10%;
  left: 20%;
  right:20%;
}

#headforAdvSearch{
  /* font-family:'Noto Serif SC', serif; */
  /* font-weight:800; */
  /* position: relative;
  margin: auto;
  left:40% */
  font-size: 36px;
  font-weight:400;
  margin-top: 0;
  text-align: center;}
.changeButton{
  position:center;
  height: 20px;
  width: 50px;
  padding: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
</style>